<!-- 
  ref 标记在 组合式中如何玩
    ref 标记的元素，选项式的时候，可以通过 this.$refs.xxx 来获取
    但是在 组合式的时候，没有 this 该如何获取 标记的元素或组件的内容呢？

  组合式中玩 ref 标记的步骤：
    1. 先声明一个 ref 数据，初始值可以给一个 null
      const myBox = ref(null)
      const myHello = ref(null)
    
    2. 使用 ref 属性标记元素或组件，属性的值使用 第一步中的 ref 数据
      <div ref="myBox" ></div>

      <Hello ref="myHello"></Hello>
    
    3. 组件挂载完成之后，可以直接通过 第一步中的 ref 数据来获取到响应的内容
 -->

<template>
  <div>
    <p ref="myP">{{ count }}</p>

    <Hello name="张三" :age="18" sex="男" city="深圳市" @a="count++" @b="count--" />

    <hr />

    <World>
      <template #default>
        <p>默认插槽内容</p>
      </template>

      <template #top>
        <p>Top的插槽内容</p>
      </template>
    </World>

    <hr />

    <Films ref="myFilms" />
  </div>
</template>

<script setup>
// 直接引入组件不需要注册了
import { onMounted, ref } from 'vue'
import Hello from './components/Hello.vue'
import World from './components/World.vue'
import Films from './components/films/index.vue'

const count = ref(1)
console.log(this) // undefined

const myP = ref(null)
const myFilms = ref(null)
console.log('myP', myP.value) // null 需要等到组件挂载完成
console.log('myFilms', myFilms.value) // null 需要等到组件挂载完成

onMounted(() => {
  console.log('mounted myP', myP.value) // DOM对象
  console.log('mounted myFilms', myFilms.value)
  // Films组件的实例对象
  //   1. Films 组件如果是选项式写法，那么获取的是实例对象
  //       如果声明了 expose 的话，则获取到的式 expose 声明的内容
  //   2. Films 组件如果是选项式的 setup 写法，那么获取的也是实例对象
  //       如果通过 setup 第二个参数，context.expose 函数来声明对外的暴露的话
  //   3. Films 组件如果是 setup 语法糖的写，那么获取的是一个空对象
  //       可以通过 defineExpose 来控制对外的暴露
})
</script>
